<script setup lang="ts">
const { $gsap, $ScrollTrigger } = useNuxtApp()

const screen2 = ref<HTMLElement | null>(null)
const pic4 = ref<HTMLElement | null>(null)
const pic1 = ref<HTMLElement | null>(null)
const pic2 = ref<HTMLElement | null>(null)
const pic3 = ref<HTMLElement | null>(null)
const pic5 = ref<HTMLElement | null>(null)
const pic6 = ref<HTMLElement | null>(null)
const pic7 = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!import.meta.client) return

  // const t = $gsap.timeline()
  // t.fromTo(pic4.value, { width: '18.75em' }, { width: '16.75em' }, '<')
  // t.fromTo(pic1.value, { left: '55.125em' }, { left: '14.3em' }, '<')
  // t.fromTo(pic7.value, { right: '55.125em' }, { right: '14.3em' }, '<')
  // t.fromTo(pic2.value, { left: '55.125em' }, { left: '26.1em' }, '<')
  // t.fromTo(pic6.value, { right: '55.125em' }, { right: '26.1em' }, '<')
  // t.fromTo(pic3.value, { left: '55.125em' }, { left: '39.8em' }, '<')
  // t.fromTo(pic5.value, { right: '55.125em' }, { right: '39.8em' }, '<')

  $ScrollTrigger.create({
    trigger: screen2.value,
    start: 'top top',
    end: '+=1000',
    markers: true,
    scrub: true,
    pin: true,
    animation: $gsap
      .timeline()
      .fromTo(pic4.value, { width: '18.75em' }, { width: '16.75em' }, '<')
      .fromTo(pic1.value, { left: '55.125em' }, { left: '14.3em' }, '<')
      .fromTo(pic7.value, { right: '55.125em' }, { right: '14.3em' }, '<')
      .fromTo(pic2.value, { left: '55.125em' }, { left: '26.1em' }, '<')
      .fromTo(pic6.value, { right: '55.125em' }, { right: '26.1em' }, '<')
      .fromTo(pic3.value, { left: '55.125em' }, { left: '39.8em' }, '<')
      .fromTo(pic5.value, { right: '55.125em' }, { right: '39.8em' }, '<'),
  })
})
</script>

<template>
  <div class="h-screen bg-amber-400"></div>
  <div ref="screen2" class="relative h-screen bg-blue-400 text-[0.78125vw]">
    <div class="relative h-full w-full">
      <img
        ref="pic1"
        class="absolute bottom-[19em] left-[55.125em] w-[11.26em]"
        src="~/assets/images/vivo/rom1.webp"
        alt=""
      />
      <img
        ref="pic2"
        class="absolute bottom-[17em] left-[55.125em] w-[13.06em]"
        src="~/assets/images/vivo/rom2.webp"
        alt=""
      />
      <img
        ref="pic3"
        class="absolute bottom-[15em] left-[55.125em] w-[14.86em]"
        src="~/assets/images/vivo/rom3.webp"
        alt=""
      />
      <img
        ref="pic4"
        class="absolute bottom-[14em] left-[55.125em] z-10 w-[18.75em]"
        src="~/assets/images/vivo/rom4.webp"
        alt=""
      />
      <img
        ref="pic5"
        class="absolute right-[54.125em] bottom-[15em] z-[9] w-[14.86em]"
        src="~/assets/images/vivo/rom5.webp"
        alt=""
      />
      <img
        ref="pic6"
        class="absolute right-[54.125em] bottom-[17em] z-[8] w-[13.06em]"
        src="~/assets/images/vivo/rom6.webp"
        alt=""
      />
      <img
        ref="pic7"
        class="absolute right-[55.125em] bottom-[19em] z-[7] w-[11.26em]"
        src="~/assets/images/vivo/rom7.webp"
        alt=""
      />
    </div>
  </div>
  <div class="h-screen bg-red-400"></div>
</template>

<style scoped lang="scss"></style>
